import React, { useEffect, useRef, useState } from 'react'
import { Form, Input, Button } from 'antd-mobile'
import MyHead from '../../components/MyHead'
import './index.scss'
import { ShowError, ShowMsg } from './../../utils/message';

import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { reg } from '../../utils/validate';
import InputPass from '../../components/InputPass';
import { Ajax } from '../../api/api';
import { useNavigate, Link } from 'react-router-dom';
import qs from 'qs'

const Reg = () => {
    const [visible, setVisible] = useState(false)
    const [visibleTwo, setVisibleTwo] = useState(false)
    const [form] = Form.useForm()
    const formRef: any = useRef()
    const router = useNavigate()
    const onFinish = async (value: any) => {
        let res: any = await Ajax.register(value)
        if (res.code == 200) {
            router('/login?' + qs.stringify(value))
        }
    }

    const onFinishFailed = () => {
        ShowMsg('注册信息校验失败!')
    }

    useEffect(() => {

    }, [])
    return (
        <div className='reg pg' >
            <MyHead title='注册' />
            <div className='reg-box'>
                <Form
                    form={form}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    layout={'horizontal'}
                    ref={formRef}
                    footer={
                        <div>
                            <Button block type='submit' color='success' size='middle'>
                                提交
                            </Button>
                            <Button block type='reset' className='mt10' color='danger' size='middle'>
                                重置
                            </Button>
                        </div>
                    }
                >
                    <Form.Header>欢迎你注册一个新账号哦~</Form.Header>
                    <Form.Item name='username' label='用户名称'
                        rules={[{ required: true }]}>
                        <Input placeholder='请输入用户名称' clearable />
                    </Form.Item>
                    <Form.Item name='phone' label='手机号码' rules={[
                        { required: true },
                        {
                            pattern: reg.phone,
                            message: '请输入正确的手机号'
                        }
                    ]}>
                        <Input placeholder='请输入手机号码' clearable />
                    </Form.Item>

                    <InputPass
                        name='password'
                        label='登录密码'
                        placeholder='请输入登录密码'

                    />
                    <Form.Item
                        name='dbpass'
                        label='确认密码'
                        hasFeedback
                        dependencies={['password']}
                        rules={[
                            { required: true },
                            {
                                pattern: reg.pwd,
                                message: '请输入正确的密码(6-16的数字字母组合)'
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (reg.pwd.test(value) && reg.pwd.test(getFieldValue('password'))) {
                                        if (getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        } else {
                                            return Promise.reject(new Error('两次密码不一致'));
                                        }
                                    } else {
                                        return Promise.reject(new Error(''));
                                    }
                                },
                            }),
                        ]}
                        extra={

                            <div style={{}}>
                                {!visibleTwo ? (
                                    <EyeInvisibleOutline onClick={() => setVisibleTwo(true)} />
                                ) : (
                                    <EyeOutline onClick={() => setVisibleTwo(false)} />
                                )}
                            </div>
                        }
                    >
                        <Input placeholder='请输入确认密码' clearable type={visibleTwo ? 'text' : 'password'} />
                    </Form.Item>

                    <Form.Item >
                        <div className="links flex ">
                            <Link to='/login' className='link1'>登录</Link>
                            <Link to='/findpass' className='color2'>找回密码</Link>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Reg